<!--    头部-->
{include file="common/head" /}
  <body>
    <!-- Page-->
    {include file="common/nav" /}

      <section class="section-xs bg-white">
        <div class="shell">
          <h1>{$catName}</h1>
          <div class="row isotope-wrap">
            <!-- Isotope Filters-->
            <div class="col-lg-12">
              <div class="isotope-filters isotope-filters-horizontal tabs-custom tabs-horizontal">
                <ul class="nav-custom nav-custom-tabs">
                  <li><a class="active" data-isotope-filter="*" data-isotope-group="gallery" href="#">全部</a><span></span></li>
					{volist name='list' id='item'}
				  <li><a data-isotope-filter="Type 1" data-isotope-group="gallery" href="#">{$item.productname}</a><span></span></li>
					{/volist}
                </ul>
              </div>
            </div>
            <!-- Isotope Content-->
            <div class="col-lg-12">
              <div class="isotope column-offset-40" data-isotope-layout="fitRows" data-isotope-group="gallery">
                <div class="row">
					{volist name='list' id='item'}
                  <div class="col-sm-4 isotope-item" data-filter="Type 1">
                    <div class="box-product product-var-2"><a class="box-product-overlay overlay-dark" href="product-page.html"><img src="{$item.indent_image}" alt="" width="570" height="415"/></a>
                      <h6><a class="box-product-name" href="">{$item.productname} </a></h6>
                      <p>{$item.description}</p>
                    </div>
                  </div>
					{/volist}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section-xs bg-white">
        <div class="shell shell-inset-xs-15">
          <div class="post-video post-video-var-4 context-dark">
            <div class="post-video__image"><img src="images/video-6-1170x474.jpg" alt="" width="1170" height="474"/>
            </div>
            <div class="post-video__body"><a class="link-control post-video__control" data-lightbox="iframe" href="https://www.youtube.com/watch?v=kbXCY_qUNe8"><span class="link-control__inner"></span></a>
              <div class="post-video__caption">
                <h4>Trek Session 9.9 Carbon DH Bike Review</h4>
                <time class="heading-6" datetime="2017-09-22">September 22, 2017</time>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Page Footer-->
	<div class="footer">
		
	</div>
    </div>
    <!-- END PANEL-->
    <!-- Global Mailform Output-->
    <div class="snackbars" id="form-output-global"></div>
    <!-- PhotoSwipe Gallery-->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
            <button class="pswp__button pswp__button--share" title="Share"></button>
            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div>
          </div>
          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
          <div class="pswp__caption">
            <div class="pswp__caption__cent"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Javascript-->
	{include file="common/foot" /}
  </body>
</html>